 <template>
    <div class="header">
      <div class="container">
        <div class="nav clearfix">
          <div class="nav-logo">
            <img src="../assets/images/logo.png" alt="">
          </div>
            <div class="nav-list clearfix">
              <ul>
                <li><a href="/">首页</a></li>
                <li v-for="(t,i) in title" :key="i"><router-link :to="t.url">{{t.name}}</router-link></li>
              </ul>
              <a class="login"><Icon type="person"></Icon></a>
            </div>
        </div>
      </div>
    </div>
 </template>

<script>
    export default {
        name:'listHeader',
        data(){
          return{
            title:[
                  {name:"我们提供什么",url:'protect'},
                  {name:"我们的优势",url:'advantage'},
                  {name:"农场展示",url:'farmshow'},
                  {name:"联系我们",url:'contact'}
            ]
          }
        }
    }

</script>

<style scoped>
 a{text-decoration:none;color: rgb(255, 255, 255);}
 .header{
     background-image:url(../assets/images/background2.jpg);
     background-attachment:inherit;
     background-position: 45% 50%;
 }
  .container{
    width:80%;
    margin: 0 auto;
  }
  .nav{
    display:flex;
    justify-content:space-around;
    padding-bottom:28%;
  }
  .nav-logo{
    height:56px;
    vertical-align: middle;
    margin-top:15px;
  }
  .nav-logo img{
    width:180px;
    height:40px;
    padding-left:50px;
  }
  .nav-list{
    height:56px;
    margin-top:20px;
    white-space: nowrap;
  }
  .nav-list ul li{
    list-style:none;
    float:left;
    font-size:14px;
  }
  .nav-list ul li a{
    padding:22px;
    transition:all 0.5s;
  }
  .nav-list ul li a:hover{
    background-color:#48A864;
  }
  
  .login{
    margin-left:150px;
    border-radius: 3px;
    font-size: 14px;
    background: #48a864;
    padding:10px 15px;
  }
</style>